<!DOCTYPE html>
<html>
     
    <head>
        <title>jqUi Starter</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        
        <link rel="stylesheet" type="text/css" href="css/simple.css"/>
        <link rel="stylesheet" type="text/css" href="kitchensink/icons.css" /> 
        <link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.css" title="default"/>
        
        <!-- 各种主题 -->
        <link rel="stylesheet"  type="text/css" href="kitchensink/jq.ui.carbon.css" title="carbon" disabled='true'/>
		<link rel="stylesheet"  type="text/css" href="kitchensink/jq.ui.eco.css" title="eco" disabled='true' />
		<link rel="stylesheet"  type="text/css" href="kitchensink/jq.ui.frosty.css" title="frosty" disabled='true'/>
		<link rel="stylesheet"  type="text/css" href="kitchensink/jq.ui.slate.css" title="slate" disabled='true'/>
		<link rel="stylesheet"  type="text/css" href="kitchensink/jq.ui.volcano.css" title="volcano" disabled='true' />
        
        <style>
			.scrollBar{background:white;}
		    h3 {text-align:center; font-size:35px;}
		    ul.iconLinks li {font-size:12px; font-weight:normal;}
		    .listbutton {
		        display:block;
		        border:1px solid black;
		        color:black;
		        background:orange;
		        border-radius:5px;
		        width:80%;
		        text-decoration:none;
		        text-align:center;
		        margin:auto;
		        margin-bottom:10px;
		        height:30px;
		        line-height:30px;
		    }
		    .class16 {
		        background:green;
		        color:red;
		    }
			.jqmscrollBar {background:white !important;}	
		</style>
        
        <script type="text/javascript" charset="utf-8" src="js/jq.mobi.js"></script> 
       <!-- 加载jqmobi插件 -->
        <script type="text/javascript" charset="utf-8" src="js/plugins/jq.swipe.js"></script> 
		<script type="text/javascript" charset="utf-8" src="js/plugins/jq.template.js"></script> 
		<script type="text/javascript" charset="utf-8" src="js/plugins/jq.carousel.js"></script> 
		<script type="text/javascript" charset="utf-8" src="js/plugins/jq.drawer.js"></script> 
		<script type="text/javascript" charset="utf-8" src="js/plugins/jq.shake.js"></script> 
		<script type="text/javascript" charset="utf-8" src="js/plugins/jq.alphatable.js"></script> 
		<script type="text/javascript" charset="utf-8" src="js/ui/jq.ui.js"></script> 
        
        <script type="text/javascript" src="js/cordova-1.8.0.js"></script>
        <script type="text/javascript" src="js/rss.helper.plugin.js"></script>
        <script type="text/javascript" src="js/sina.weibo.share.js"></script>
        <script type="text/javascript" src="js/simple.js"></script>
        <script type="text/javascript" src="js/rssCustomize.js"></script>
        <script type="text/javascript">
            var webRoot = "./";
            $.ui.isAjaxApp = false;
            $.ui.autoLaunch = false; //By default, it is set to true and you're app will run right away.  We set it to false to show a splashscreen
            /* This function runs when the body is loaded.*/
            var init = function () {
            		// 修改返回键为中文显示
                    $.ui.backButtonText = "返回";// We override the back button text to always say "Back"
                    window.setTimeout(function () {
                        $.ui.launch();
                    }, 1500);//We wait 1.5 seconds to call $.ui.launch after DOMContentLoaded fires
                };
            document.addEventListener("DOMContentLoaded", init, false);
            $.ui.ready(function () {
                //This function will get executed when $.ui.launch has completed
                
            });
 			
            /* 隐藏/显示元素 */
            function showHide(obj,objToHide){
        		var el=$("#"+objToHide)[0];
        		if($(obj).attr('class') === "expanded selected"){
        			$(obj).attr('class', "collapsed");
        		}
        		else if($(obj).attr('class') === "collapsed selected") {
        			$(obj).attr('class', "expanded");
        		}
        		$(el).toggle();
        	}
            
            /* 修改主题 */
            var oldElem="default";
			function setActiveStyleSheet(title) {
			   var a = document.getElementsByTagName("link");
			   var currElem;
			   
			   if(title==oldElem.getAttribute("title")||oldElem=="default")
			      return;
			   for(i=0; i<a.length; i++) {
			   
			       if(a[i].getAttribute("title")==title){
			         currElem=a[i];
			       }
			       else if(!a[i].getAttribute("disabled")&&a[i].getAttribute("title"))
			          oldElem=a[i];
			   }
			   
			   currElem.removeAttribute("disabled");
			   jq.ui.showMask();
			   window.setTimeout(function(){
			      jq.ui.hideMask();
			      oldElem.setAttribute("disabled","true");
			   },500);
			}
			$(document).ready(function(){
				oldElem=document.getElementsByTagName("link")[0];
				//setActiveStyleSheet('frosty');
			});
        </script>
        
    </head>
     
    <body>
        <div id="jQUi"> <!-- this is the main container div.  This way, you can have only part of your app use jqUi -->
            <!-- this is the header div at the top -->
            <div id="header">
                <h1 id="pageTitle">RSS 阅读器</h1>
                <img src='pic/logo.png' onclick="$.ui.toggleSideMenu()" style="float:right; padding-top:10px;"/>
            </div>
            <div id="content">
                <!-- here is where you can add your panels -->
                <!-- 主页 -->
                <div title='RSS阅读器' id="main" class="panel" selected="true">
					<div id="carousel_feed_content">
						
					</div>
                </div><!-- 主页 end -->
                
                <!-- RSS Channel RSS频道 -->
                <div title='RSS频道' id="rss_channel" class="panel">
                	<header>
				        <h1>RSS频道</h1>
				        <img src='pic/logo.png' onclick="$.ui.toggleSideMenu()" style="float:right; padding-top:10px;"/>
				        <div onclick="refresh_feed_content()" class="icon refresh" style="float:left; padding-top:10px; padding-right: 10px">&nbsp;&nbsp;</div>
				        <div class="icon up" onclick="$.ui.scrollToTop('rss_channel')" style="float:left; padding-top:10px; padding-right: 10px">&nbsp;&nbsp;</div>
                	</header>
                	
					<div id="rss_channel_content">
					<p>
					<a onclick="open_url('http://www.baidu.com');" class="button">百度</a>
					<pre id="description" class="feed_description"><img src="s/dfsd.png" ></img></pre>
					<p>publish at: 2012.2.2</p>
					</p>
					<a onclick="open_url('http://www.baidu.com');" class="button">百度</a>
					<pre id="description" class="feed_description">&lt;a href='http://news.sohu.com/20090724/n265463858.shtml'&gt;&lt;img src='http://photocdn.sohu.com/20090724/Img265463859_ss.jpg' style='border: 1px solid #000000;'/&gt;&lt;/a&gt;7月23日在哈尔滨哈红公路拍摄的车祸事故现场。</img></pre>
					<p>publish at: 2012.2.2</p>
					</p>
					</div>
				</div><!-- RSS Channel RSS频道 end -->
				
				<!-- RSS详细阅读 -->
                <div title='RSS阅读' id="rss_detailed_content" class="panel">
					<iframe id="detailed_content" width="90%" height="100%" scrolling="auto">	
					</iframe>
				</div><!-- RSS详细阅读 end -->
				
				<!-- 主题页 -->
				<div title='主题' id="themes" class="panel">
					<ul>
						<li><a href="javascript:;" onclick="setActiveStyleSheet('default');">default</a></li>
						<li><a href="javascript:;" onclick="setActiveStyleSheet('carbon')">carbon</a></li>
						<li><a href="javascript:;" onclick="setActiveStyleSheet('eco')">eco</a></li>
						<li><a href="javascript:;" onclick="setActiveStyleSheet('frosty')">frosty</a></li>
						<li><a href="javascript:;" onclick="setActiveStyleSheet('slate')">slate</a></li>
						<li><a href="javascript:;" onclick="setActiveStyleSheet('volcano')">volcano</a></li>
					</ul>
				</div><!-- 主题页 end -->

				<!-- 定制 -->
				<div title='定制' id="customizePanel" class="panel">

					<!-- <h1 align="center">Rss Url列表:</h1>-->
					<ul id="urlDisplay">
					    
					</ul>
					<a class="icon add button" onclick="showPopupGroup(this);">添加组</a>
				</div><!-- 定制 -->
				
				<!-- 帮助页面 -->
				<style>
				.carousel_paging2 {
					border-radius: 10px;
					
					background: #ccc;
					width: 10px;
					height: 10px;
					float: left;
				}
		
				.carousel_paging2_selected {
					border-radius: 10px;
					
					background: #000;
					width: 10px;
					height: 10px;
					float: left;
				}
		
				.spacer {
					width: 10px;
					float: left;
				}
		
				.carousel_content {
					-webkit-transform: translate3d(0, 0, 0);
				}
				</style>
				<script>
                var carousel;
    			function init_carousel() {
    				carousel=$("#carousel").carousel({
    					pagingDiv: "carousel_dots",
    					pagingCssName: "carousel_paging2",
    					pagingCssNameSelected: "carousel_paging2_selected",
    					preventDefaults:false
    				});
    			}
    			window.addEventListener("load", init_carousel, false);
                </script>
				<div title='帮助' id="help" class="panel" scrolling="no">
                	<div id="carousel" style="display:block;height:100%;width:100%;">
						<div style="background: red;">
							点击右上角的logo, 可以在左侧显示导航栏.
						</div>
						<div style="background: green;"></div>
						<div style="background: blue;"></div>
						<div style="background: pink;"></div>
					</div>
                	<div id="carousel_dots" style="text-align: center; margin:auto; clear: both; position: relative; top: 80%; z-index: 400"></div>
                </div><!-- 帮助 end -->
                
				<!-- 关于 -->
				<div title='关于我们' id="about" class="panel">
					<h1 align="center">关于开发者</h1>
					<br/>
					<p align="center">胡恩慈</p>
					<img src="pic/UFO.jpg" width="100%"/>
					<p align="center">我们都是可怜的外星人!</p>
					<hr/>
					<p align="center">Duce Studio (c) 2012 copyright <a href="javascript:show_phone_information();" class="button">手机信息</a></p>
				</div><!-- 关于 end -->
            </div>
            <!-- bottom navbar. Add additional tabs here -->
            <!-- 底部导航栏 -->
            <div id="navbar">
                <div class="horzRule"></div>
                <a href="#main" id='navbar_home' class='icon home'>主页</a>
                <a href="#rss_channel" id='navbar_home' class='icon stack'>RSS频道</a>
<!--                 <a href="#themes" id='navbar_home' class='icon picture'>主题</a> -->
                <a href="#help" id='navbar_home' class='icon question'>帮助</a>
                <a onclick="javascript:onCustomizeclick(this);" href="#customizePanel" class="icon settings">定制</a>
<!--                 <a href="javascript:$.ui.showModal('about');" id='navbar_home' class='icon info' data-transition="pop">关于</a> -->
            </div>
            <!-- this is the default left side nav menu.  If you do not want any, do not include these -->
            <nav>
                <div class='title'>导航</div>
                <ul>
                    <li class="icon home mini">
                        <a href="#main">主页</a>
                    </li>
                    <li class="icon stack mini">
                        <a href="#rss_channel">RSS频道</a>
                    </li>
                </ul>
                <div class='title'>配置</div>
                <ul>
                    <li class="icon picture mini">
                        <a href="#themes">主题</a>
                    </li>
                    <li class="icon pin mini">
                        <a href="javascript:;" onclick="$.ui.toggleNavMenu();">显示/隐藏导航</a>
                    </li>
                    <li class="icon settings mini">
                        <a href="#customizePanel" onclick="onCustomizeclick(this)">定制</a>
                    </li>
                </ul>
                <div class='title'>其他</div>
                <ul>
                	<li class="icon question mini">
                        <a href="#help">帮助</a>
                    </li>
                    <li class="icon info mini">
                        <a href="javascript:$.ui.showModal('about');" data-transition="pop">关于</a>
                    </li>
                </ul>
            </nav>
        </div>
    </body>
</html>